<template>
	<view>
		<!-- 弹窗 -->
		<u-popup :show="popupShow" mode="center" :round="10" @close="popupClose" @open="popupOpen">
		
			<view class="popup-box">
		
				<view class="popup-title" v-if="title">
					{{title}}
				</view>
		
				<view class="popup-subhead">
					{{subhead}}
				</view>
		
				<view class="popup-bottom flex-no-horizontal">
		
					<view>
						<u-button type="primary" class="popup-bottom-cancel" text="取消" @click="popupCancel"></u-button>
					</view>
		
					<view>
						<u-button type="primary" class="popup-bottom-confirm" :color="confirmBg"
						:text="confirmText" @click="popupConfirm"></u-button>
					</view>
		
				</view>
		
			</view>
		
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:{
			title: {
				type: String,
				default () {
					return '';
				}
			},
			subhead:{
				type: String,
				default () {
					return '';
				}
			},
			popupShow:{
				type:Boolean,
				default (){
					return false;
				}
			},
			confirmText: {
				type: String,
				default() {
					return '确定'
				}
			},
			confirmBg: {
				type: String,
				default() {
					return 'rgba(55, 214, 123, 1)'
				}
			}
		},
		data() {
			return {
				
			};
		},
		computed: {
			
		},
		methods: {
			
			popupClose(){
				
			},
			
			popupOpen(){
				
			},
			
			popupCancel(){
				this.$emit('popupHide',false)
			},
			
			popupConfirm(){
				this.$emit('popupConfirm')
			},
			
		},
	};
</script>

<style lang="scss" scoped>
	.popup-box {
		width: 560rpx;
		padding: 0 40rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		.popup-title {
			text-align: center;
			color: $uni-color-black;
			font-size: $uni-font-size-xlg;
			font-weight: bold;
			margin: 60rpx 0 40rpx;
		}

		.popup-subhead {
			text-align: center;
			color: $uni-color-black;
			font-size: $uni-font-size-base;
			margin: 60rpx 0;
			
		}

		.popup-bottom {
			width: 100%;
			justify-content: space-around;
			margin-bottom: 60rpx;

			view {
				width: 235rpx;
				height: 80rpx;

			}

			.popup-bottom-cancel {
				border: 0;
				border-radius: 40rpx;
				background-color: rgba(247, 247, 247, 1);
				font-size: $uni-font-size-base;
				color: rgba(178, 180, 181, 1);
			}

			.popup-bottom-confirm {
				border: 0;
				border-radius: 40rpx;
				background-color: rgba(55, 214, 123, 1);
				font-size: $uni-font-size-base;
				color: #FFFFFF;
			}

		}
	}
</style>
